<template>
    <view class="cart-item ">
        <u-gap height="20"></u-gap>
        <view class="title flex-row ai-center jc-between p-20 bg-ff" v-if="storeCart">
            <view class="">
                <u-checkbox v-model="storeCart.checked" shape="circle" @change="checkedCartItem()">
                    {{storeCart.shop_info.shop_name}}
                    <u-icon name="arrow-right" size="24"></u-icon>
                </u-checkbox>
            </view>
            <view class="status size-24  " style="color: #F82727;">
                {{storeCart.status|initStatus}}
            </view>
        </view>
        <view class="goods-info  bg-ff"  v-for="(cartItem, cartIndex) in storeCart.carts">
            <mall-cart-item :cartIndex="cartIndex" :storeCartIndex="storeCartIndex"></mall-cart-item>
        </view>
        <view class="recommend-dishes bg-ff flex-row ai-center" v-if="storeCart">
            <view class="refresh" style="margin:0 20rpx;">
                <image src="../../../static/refresh.png" style="width: 30rpx; height:30rpx;" mode=""></image>
            </view>
            <u-tag v-for="(tagItem,tagIndex) in newTags" :key="tagIndex" class="tag" :text="tagItem.name|formatGoodsTag"
                mode="plain" />
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            storeCartIndex: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
            }
        },
        computed: {
            storeCart() {
                return this.$store.getters.getStoreCart(this.storeCartIndex)
            },
            newTags() {
                if (this.storeCart.recommend.dishes.length > 4) {
                    let arr = this.storeCart.recommend.dishes.splice(0, 4)
                    return arr
                } else {
                    return this.storeCart.recommend.dishes
                }
            },
        },
        methods: {
            checkedCartItem() {
                this.$store.dispatch('setStoreCartItem', this.storeCartIndex)
            }
        },
        filters: {
            initStatus(value) {
                switch (value) {
                    case 1:
                        return '及时配送'
                    case 2:
                        return '定点配送'
                    case 3:
                        return '预定配送'
                    default:
                        return ''
                }
            },
            
        }
    }
</script>

<style lang="scss" scoped>
    .cart-item {
      


        .recommend-dishes {
            padding: 10rpx 0;

            .tag {
                margin: 4px;
            }
        }

    }
</style>
